<!--
 * @Author: Li Zengkun
 * @Date: 2022-07-25 17:22:13
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-08-16 23:36:45
 * @Description: 订单列表
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/order_list.css">
    <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
    <title>我的订单</title>
</head>

<body>
    <header>
        <a id="return" href="javascript:history.back()">
            <i class="fa fa-chevron-left" aria-hidden="true"></i>
        </a>
        我的订单
        <p></p>
    </header>
    <nav>
        <ul id="nav-list">
            <li>待付款</li>
            <li>待发货</li>
            <li>待收货</li>
            <li>待评价</li>
            <li>已完成</li>
        </ul>
    </nav>
    <div class="content-box">
        <ul id="order-list" class="order-list">
            <!-- 插入位置 -->
        </ul>
        <!-- nothing -->
        <div class="nothing">
            <img src="../img/ip/暂无安排.svg" alt="">
            <p>暂无订单...</p>
        </div>
    </div>


    <!-- 加载中 -->
    <div class="loading">
        <img class="rotate-center" src="../img/loading.svg" alt="">
        <p>加载中...</p>
    </div>
    <!-- 提示 tip -->
    <span id="tip" class="tip"></span>
</body>

<script src="../js/axios.min.js"></script>
<script src="../js/axios_config.js"></script>
<script src="../js/api.js"></script>
<script>
    let oNav = document.querySelector('#nav-list')
    let oLoading = document.querySelector('.loading')
    let oOrderList = document.querySelector('#order-list')
    let oNothing = document.querySelector('.nothing')

    let url = new URL(location.href)
    let status = url.searchParams.get('status') != null ? parseInt(url.searchParams.get('status')) : 0
    let pageSize = 4;
    let pageIndex = 1;
    let orderList = [];

    init()

    async function init() {
        // 获取订单列表
        await getOrderListByStatus(status)
        oLoading.style.display = 'none'
        if (orderList.length === 0) {
            oNothing.style.display = 'block'
        } else {
            oNothing.style.display = 'none'
        }

        switch (status) {
            case 0:
                oNav.children[0].classList.add('active')
                break;
            case 3:
                oNav.children[1].classList.add('active')
                break;
            case 4:
                oNav.children[2].classList.add('active')
                break;
            case 5:
                oNav.children[3].classList.add('active')
                break;
            default:
                break;
        }

        // 插入获取的数据
        insertToOrderList()

        // 添加导航栏点击事件
        oNav.addEventListener('click', async(event) => {
            let item = event.target;
            Array.from(oNav.children).forEach((element) => {
                element.classList.remove('active')
            })
            item.classList.add('active')

            // 删除订单列表项
            Array.from(oOrderList.children).forEach((item) => {
                item.remove()
            })

            oLoading.style.display = 'block'

            switch (item.innerText) {
                case "待付款":
                    status = 0
                    break;
                case "待发货":
                    status = 3
                    break;
                case "待收货":
                    status = 4
                    break;
                case "待评价":
                    status = 5
                    break;
                case "已完成":
                    status = 0
                    break;
                default:
                    break;
            }
            // 获取订单列表
            orderList = []
            await getOrderListByStatus(status)
            oLoading.style.display = 'none'
            if (orderList.length === 0) {
                oNothing.style.display = 'block'
            } else {
                oNothing.style.display = 'none'
            }
            insertToOrderList()

        })


    }

    function insertToOrderList() {
        orderList.forEach((order) => {
            let goodsHTML = ''
            order.goodsList.forEach((goods) => {
                goodsHTML += `<li class="goods-item">
                                <div class="img-box">
                                    <img src="${goods.img_md}" alt="">
                                </div>
                                <div class="text-content">
                                    <p class="title">${goods.name}</p>
                                    <p class="subtitle">
                                        <span class="goods-type">${goods.type?goods.type:'默认'}</span>
                                        <span class="goods-price">￥${goods.goods_price.toFixed(2)}</span>
                                    </p>
                                    <p class="num">× ${goods.goods_num}</p>
                                </div>
                            </li>`
            })
            let orderHTML = `<li class="order-item" data-id="${order.id}">
                                <div class="head">
                                    <p class="red-font">${order.status}</p>
                                    <p>${order.create_time}</p>
                                </div>
                                <ul class="goods-list">
                                    ${goodsHTML}
                                </ul>
                                <div class="total">
                                    <span class="total-num">共 <span id="total-num" class="red-font">${order.goodsList.length}</span> 件商品</span>
                                    <span class="total-price">合计：<span class="red-font">￥${order.payment.toFixed(2)}</span></span>
                                </div>
                                <div class="btn-box">
                                    <div class="btn cancel-btn">取消订单</div>
                                    <div class="btn pay-btn">立即付款</div>
                                </div>
                            </li>`
            oOrderList.insertAdjacentHTML('beforeend', orderHTML)
        })
    }
    /**
     * @description: 根据订单状态 status 获取订单列表
     * @return {*}  
     * @param {*} status Number 订单状态 0-待付款，3-待发货，4-待收货，5-待评价，all-所有状态;
     */
    async function getOrderListByStatus(status) {
        await axios.get('/order/list', {
            params: {
                pageSize: pageSize,
                pageIndex: pageIndex,
                status: status,
            }
        }).then(async resp => {
            if (resp.status) {
                if (resp.data.length === 0) return
                orderList = orderList.concat(resp.data);
                pageIndex++;
                await getOrderListByStatus(status);
            }
        })
        pageIndex = 1
        return
    }
</script>

</html>